<script setup>
    import {ref, defineProps, watch, nextTick} from 'vue'
    import {Chart} from '@antv/g2';

    const pops= defineProps({
        data:Array
    })
    const chartEle = ref(null)
    const initChart=()=>{
        chartEle.value = new Chart({
            container: 'container',
            autoFit: true,
            height:190
        });
        chartEle.value.options({
            axis:{
                x:{title:null,labelFill:'#ffffff'},
                y:false
            }
        })
        chartEle.value
            .interval()
            .data(pops.data)
            .encode('x', 'date_name')
            .encode('y', 'total')
            .style('fill','#00effb')
            //.axis('y', {title: null,labelFill:'#ffffff'})
            //.axis('y',null)
            //.axis('x',{title:null,labelFill:'#ffffff'})
        chartEle.value.render();
    }

    watch(
        () => pops.data,
        (newVal, oldVal) => {
            if (newVal === oldVal) return
            if(newVal.length < 1) return
            //chartEle.value.changeData(pops.data)
            if(oldVal.length>0)chartEle.value.destroy()
            nextTick(initChart)
        },
        {deep: true}
    );
</script>

<template>
    <div>
        <div id="container"></div>
    </div>
</template>

<style scoped>

</style>